import React, { Component } from 'react';

//知识点:
// 修改state 数据的两种方式
// 方式1: this.setState({key:value},callback)
// 参数2: 回调函数callback 当state 中的数据更新后, 执行该函数
// 方式2: this.setState((state,props)=>{ return{key:value}},callback)

// 知识点2:
// this.setState() 在react18版本后只有异步


// 知识点3:
// 在react17中this.setState同步修改数据的场景
// 场景1: 当修改数据发生在定时器中时候, 那么就变成同步修改
// 场景2: 当修改数据发生在自定义原生的事件中的时候, 也变成了同步修改
class Mycls extends Component {
    state = {
        username: '豹子头-林冲',
        age: 38
    }
    render() {
        // let username = '张三'
        console.log('this2', this);
        return (
            <div>
                <p id='p1' onClick={this.edit}>{this.state.username}--{this.state.age}</p>
            </div>
        );
    }
    edit = () => {
        this.setState((state, props) => {
            // console.log(state);
            // console.log('props', props);
            return {
                username: "花和尚-鲁智深",
                age: state.age + props.step
            }
        }, () => {
            // 获取修改后的state 数据
            console.log('state1', this.state);
            console.log(1, document.querySelector('#p1').innerHTML);
        })
        // 获取修改后的state 数据
        console.log('state2', this.state);
        console.log(2, document.querySelector('#p1').innerHTML);
    };
    componentDidMount() {
        // setTimeout(() => {
        //     this.setState((state, props) => {
        //         return {
        //             username: "花和尚-鲁智深",
        //             age: state.age + props.step
        //         }
        //     })
        //     // 在react17时候,下方打印输出的值是最新的值
        //     console.log(this.state);
        // }, 0)
        document.onclick = this.documentClickFn

    };
    documentClickFn = () => {
        // console.log('this', this);
        this.setState((state, props) => {
            return {
                username: "花和尚-鲁智深",
                age: state.age + props.step
            }
        })
        // 在react17时候,下方打印输出的值是最新的值
        console.log(this.state);
    }


}

export default Mycls;
